<template>
  <div class="app-container">
    <ex-base-table
      ref="exTreeTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      :isDropdownMenuEvent="false"
      :isHandleCreate="false"
      :isVxeCheckbox="false"
      @handleUpdateEmit="handleUpdateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
    >
      <!-- 操作栏按钮扩展插槽 -->
      <template v-slot:handleExtend="{ row }">
        &nbsp;
        <el-button size="mini" type="text" @click="viewPerformedManually(row)">
          手动执行
        </el-button>
      </template>
    </ex-base-table>
    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData.sync="formSubmitData"
      :parentNodeName="parentNodeName"
      :allNodeTypesOptions="allNodeTypesOptions"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form>
    <performed-manually
      ref="submitFormPerformedManually"
      :dialogFormVisible.sync="dialogFormVisiblePerformedManually"
      :dialogStatus="dialogStatus"
      :formSubmitData.sync="formSubmitDataPerformedManually"
      :parentNodeName="parentNodeName"
      @handleFromAddSonNodeEmit="handleFromAddSonNodeEmit"
    >
    </performed-manually>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import XEUtils from "xe-utils";

import resetFormSubmitData from "@/views/mixins/resetFormSubmitData";
// 文章表单
import SubmitForm from "./components/SubmitForm";
import PerformedManually from "./components/PerformedManually";

import {
  findtask_s,
  delsTask,
  addsTask,
  updatesTask,
  findNodeType,
  taskqueueaddzi
} from "./service/baseApi";
// 基础表格组件
import ExBaseTable from "@/components/VxeTable/ExBaseTable";

export default {
  name: "vxe-basetable",
  mixins: [resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    SubmitForm,
    PerformedManually,
  },
  props: {
    /* 当前选中方案 */
    currentRow: {
      type: Object,
      default() {
        return {};
      },
    },
    /* 当前选中方案的已选因子 */
    factorSelected: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  // 定义属性
  data() {
    return {
      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: "",
      parentNodeName: "数据", //父级节点名称
      allNodeTypesOptions: [],
      initNodeType: "1", //初始化节点的节点类型

      // 表单数据对象
      formSubmitData: {
        id: undefined,
        node_name: "",
        node_code: "",
        parent_node_name: "",
        node_type: "",
        acs_code: "",
        path_pg_name: "",
        remark: "",
      },
      initFormSubmitData: {
        id: undefined,
        node_name: "",
        node_code: "",
        parent_node_name: "",
        node_type: "",
        acs_code: "",
        path_pg_name: "",
        remark: "",
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [], //表格数据

      /* 手动执行 */
      dialogFormVisiblePerformedManually: false,
      formSubmitDataPerformedManually: {
        id: undefined,
        s_date: "",
        e_date: "",
      },
    }; //datareturn-end
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
    currentRow() {
      this.findList();
    },
  },
  // 方法集合
  methods: {
    /* API数据操作相关 */
    // 获取所有节点类型
    async findfindNodeType() {
      await findNodeType().then(({ data }) => {
        this.allNodeTypesOptions = XEUtils.map(data.rows, (item) => {
          return {
            label: item.name,
            value: item.code,
            disabled: this.initNodeType === item.code,
            // disabled:false
          };
        });
      });
    },
    // 查询数据
    findList() {
      this.loading = true;
      // console.log(' this.formSearchData:::', this.formSearchData);
      // 请求表格数据

      findtask_s({
        m_id: this.currentRow.id,
      }).then(({ data }) => {
        // console.log('response:....', data);
        // 给表格数据赋值
        const treeData = XEUtils.toArrayTree(data.rows, {
          key: "node_code",
          parentKey: "parent_node_name",
        });
        // console.log('treeDatatreeData', treeData);
        this.tableData = treeData;
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false;
        }, 0.5 * 1000);
      });
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [
        //动态增加的字段 传进来的
        // 节点类型、 节点代码 、 节点名称 、访问源、路径+程序名、上级节点代码、备注；
        {
          field: "node_name",
          title: "节点名称",
          width: 250,
          treeNode: true,
          fixed: "left",
        },
        { field: "node_code", title: "节点代码" },
        { field: "node_type_name", title: "节点类型" },
      ];
      this.tableColumn = tabCols;
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      // let {children, mod_date, mod_us_code, ...params} = Object.assign({}, row) // copy obj
      // console.log('item:', params);
      // params = XEUtils.objectMap(params, item => {
      //   return (XEUtils.isNull(item)) ? '' : item
      // })
      // console.log('item2:', params);
      // this.formSubmitData = params

      this.formSubmitData = Object.assign({}, row);
      this.dialogStatus = type;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.submitForm.$refs["dataForm"].clearValidate();
      });
    },
    // 单行删除
    handleRmoveColEmit(row) {
      console.log("delrow:", row);
      if (row.children.length > 0) {
        this.$message.error("删除失败:还有子集！");
        return false;
      }
      delsTask({
        id: row.id,
      }).then(({ data }) => {
        // this.dialogFormVisible = false
        // this.$refs.exTreeTable.$refs.xTree.remove(row)
        this.findList();
      });
    },

    /* 表单组件相关 */
    // 修改节点
    handleFromUpdateDataEmit() {
      updatesTask({
        ...this.formSubmitData,
      }).then(({ data }) => {
        this.dialogFormVisible = false;
        this.findList();
      });
    },
    handleFromAddSonNodeEmit() {
      taskqueueaddzi({
        ...this.formSubmitDataPerformedManually,
      }).then(({ data }) => {
        this.findList();
      });
    },
    /* 手动执行 */
    viewPerformedManually(row) {
      this.$set(this.formSubmitDataPerformedManually,'id',row.id)
      this.dialogFormVisiblePerformedManually = true;
      this.$nextTick(() => {
        this.$refs.submitFormPerformedManually.$refs[
          "dataForm"
        ].clearValidate();
      });
    },
    // 手动执行提交
    handleFromManuallyDataEmit() {
      PerformedManually({
        ...this.formSubmitDataPerformedManually,
      }).then(({ data }) => {
        this.findList();
      });
    },
  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 初始化表格字段
    await this.initTableCols();
    // 初始化表格数据
    await this.findList();
    await this.findfindNodeType();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>